<template>
  <div>
    <!-- 测量数据取样配置表单弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      v-model="visibleDialog"
      :title="props.title"
      :width="props.isReadonly ? '1000px' : '1000px'"
      draggable
      align-center
      @close="closeDialog"
    >
      <el-form
        ref="formRef"
        v-show="!props.isReadonly"
        :model="formData"
        :rules="rules"
        label-width="220"
      >
        <el-divider content-position="left" v-if="formData.abilityType != ''">
          <div style="font-weight: 700">取样规则</div>
        </el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="过程质量监控分类"
              prop="abilityType"
              labelWidth="220"
            >
              <el-select
                v-model="formData.abilityType"
                placeholder="请选择过程质量监控分类"
                clearable
                :disabled="formData.id !== '' || props.abilityType != ''"
                style="width: 100%"
                @change="abilityTypeChange"
              >
                <el-option
                  v-for="item in dictionaryStore.filterDictList(
                    'AbilityTypeMin'
                  )"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- :disabled="formData.abilityType >= 6" -->
          <el-col :span="7">
            <el-form-item label="检具用途" labelWidth="120">
              <el-select
                style="width: 100%"
                v-model="formData.toolUseType"
                placeholder="请选择量检具用途"
                clearable
                :disabled="
                  formData.id !== '' ||
                  formData.abilityType == '6' ||
                  formData.abilityType == '7'
                "
                @change="toolUseTypeChange"
              >
                <el-option
                  v-for="item in useDictionary('samplingStatus')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="是否启用" prop="enabled" labelWidth="110">
              <el-switch
                v-model="formData.enabled"
                inline-prompt
                style="--el-switch-on-color: #13ce66"
                active-text="启用"
                inactive-text="禁用"
                :active-value="1"
                :inactive-value="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="监控描述">
              <el-input
                type="textarea"
                v-model="formData.memo"
                placeholder="请输入监控描述"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" />
        </el-row>

        <!-- 单值图显示 -->
        <el-row
          v-if="formData.abilityType == '0' || formData.abilityType == '1'"
        >
          <el-col :span="11">
            <el-form-item
              :label-width="'220px'"
              label="控制线上限收严比例"
              prop="upLine"
            >
              <el-input
                v-model="formData.upLine"
                placeholder="控制线上限收严比例"
                clearable
                :suffixIcon="() => '%'"
              />
            </el-form-item>
          </el-col>

          <el-col :span="1" />
          <el-col :span="11">
            <el-form-item
              :label-width="'220px'"
              label="控制线下限收严比例"
              prop="downLine"
            >
              <el-input
                v-model="formData.downLine"
                placeholder="控制线下限收严比例"
                clearable
                :suffixIcon="() => '%'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" />
          <el-col :span="11">
            <el-form-item label="单值图默认展示数量" prop="sampleNum">
              <el-input
                v-model="formData.sampleNum"
                placeholder="请输入单值图默认展示数量"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" />

          <el-col :span="11">
            <el-form-item label="取样数据集上限" prop="sampleNum">
              <el-input
                v-model="formData.maxCount"
                placeholder="取样数据集上限"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" />
          <el-col :span="11">
            <el-form-item label="取样频度">
              <el-input
                disabled
                v-model="formData.samplingFrequency"
                placeholder="取样频度"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" />
        </el-row>
        <!-- 均值图 -->
        <el-row
          v-if="formData.abilityType == '2' || formData.abilityType == '3'"
        >
          <el-col :span="11">
            <el-form-item label="均值图默认展示数量" prop="sampleNum">
              <el-input
                v-model="formData.sampleNum"
                placeholder="请输入均值图默认展示数量"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" />
          <el-col :span="11">
            <el-form-item
              label="子组样本数量"
              prop="groupingNum"
              :label-width="'220px'"
            >
              <el-input
                v-model="formData.groupingNum"
                placeholder="请输入子组样本数量"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" />
          <el-col :span="11">
            <el-form-item label="取样数据集上限" prop="sampleNum">
              <el-input
                v-model="formData.maxCount"
                placeholder="取样数据集上限"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" />
          <el-col :span="11">
            <el-form-item label="取样频度">
              <el-input
                disabled
                v-model="formData.samplingFrequency"
                placeholder="取样频度"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" />
        </el-row>

        <!-- 短期显示 -->
        <el-row v-if="formData.abilityType == '6'">
          <el-col :span="11">
            <el-form-item label="计算样本最低数量" prop="ruleLowestNum">
              <el-input
                v-model="formData.ruleLowestNum"
                placeholder="请输入计算样本最低数量"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="趋势图能够开始计算的最小采样数"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>
          <el-col :span="11">
            <el-form-item
              :label="isNotStage ? '滚动数量' : '样本节拍比对件数'"
              prop="continuousNum"
            >
              <el-input
                v-model="formData.continuousNum"
                :placeholder="`请输入${
                  isNotStage ? '滚动数量' : '样本节拍比对件数'
                }`"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              :content="`${
                isNotStage
                  ? '达到最大范围后，舍弃最早数据'
                  : '趋势图每次采样采集数据，之前必须是连续个数'
              }`"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>
        </el-row>
        <!-- 其他显示  长期100%检-->
        <el-row v-if="formData.abilityType == '4' && formData.toolUseType == 2">
          <el-col :span="11">
            <el-form-item label="首次执行时间" prop="firstExecutionTime">
              <el-date-picker
                style="width: 100%"
                v-model="formData.firstExecutionTime"
                :disabled="true"
                type="datetime"
                placeholder="请选择首次执行时间"
                format="YYYY-MM-DD HH"
                value-format="YYYY-MM-DD HH"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" />
          <el-col :span="11" v-if="isNotStage && formData.abilityType != 7">
            <el-form-item label="取样间隔（小时）" prop="intervalHour">
              <el-input
                v-model="formData.intervalHour"
                placeholder="请输入取样间隔（小时）"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" v-if="isNotStage && formData.abilityType != 7">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="进行采样的间隔时间"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>
          <el-col :span="11" v-if="formData.abilityType < '5'">
            <el-form-item
              :label="!isNotStage ? '滚动数量' : '样本节拍比对件数'"
              prop="continuousNum"
            >
              <el-input
                v-model="formData.continuousNum"
                :placeholder="`请输入${
                  !isNotStage ? '滚动数量' : '样本节拍比对件数'
                }`"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" v-if="formData.abilityType < '5'">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              :content="`${
                !isNotStage
                  ? '达到最大范围后，舍弃最早数据'
                  : '趋势图每次采样采集数据，之前必须是连续个数'
              }`"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>
          <el-col :span="11" v-if="isNotStage && formData.abilityType < 5">
            <el-form-item label="节拍比对倍数" prop="intervalSecond">
              <el-input
                v-model="formData.intervalSecond"
                placeholder="请输入节拍比对倍数"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" v-if="isNotStage && formData.abilityType < 5">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              :content="
                formData.toolUseType == 1
                  ? '趋势图采样数量之间时间间隔小于，则合格采样'
                  : `每${
                      formData.intervalHour ? formData.intervalHour : 'n'
                    }小时取样一次，此件工件的测量结果是否满足用于过程能力计算的要求，需要比对包含此工件在内往前追9件工件，这${
                      formData.continuousNum ? formData.continuousNum : 'n'
                    }件工件的测量结果的生成时间间隔需要小于${
                      formData.intervalSecond ? formData.intervalSecond : 'n'
                    }倍节拍。`
              "
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>
          <el-col :span="11">
            <el-form-item label="计算样本最低数量" prop="ruleLowestNum">
              <el-input
                v-model="formData.ruleLowestNum"
                placeholder="请输入计算样本最低数量"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="趋势图能够开始计算的最小采样数"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>

          <el-col :span="11" v-if="isNotStage">
            <el-form-item label="CPK计算周期（小时）" prop="cpkComputeHour">
              <el-input
                v-model="formData.cpkComputeHour"
                placeholder="请输入CPK计算周期（小时）"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" v-if="isNotStage">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="趋势图首次计算后，进行CPK计算的间隔时间"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>

          <el-col :span="11" v-if="isNotStage && formData.abilityType != '4'">
            <el-form-item
              label="计算最低取样时长(天)"
              prop="ruleLowestDuration"
            >
              <el-input
                v-model="formData.ruleLowestDuration"
                placeholder="请输入计算最低取样时长(天)"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :span="1" v-if="isNotStage && formData.abilityType != '4'">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="趋势图能够开始计算的最小采样时间"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>

          <el-col :span="11" v-if="isNotStage">
            <el-form-item label="取样最大范围" prop="maxRange">
              <el-input
                v-model="formData.maxRange"
                placeholder="请输入取样最大范围"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" v-if="isNotStage">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="趋势图计算采样数最大范围（按月或按采样数量）"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>
          <!-- <el-col :span="11" v-if="isNotStage">
            <el-form-item label="取样最小范围" prop="minRange">
              <el-input
                v-model="formData.minRange"
                placeholder="请输入取样最小范围"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" v-if="isNotStage">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="趋势图计算采样数最小范围（按月或按采样数量）"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col> -->
          <el-col :span="11" v-if="isNotStage">
            <el-form-item label="取样范围单位" prop="maxUnit">
              <el-select
                v-model="formData.maxUnit"
                placeholder="请选择取样范围单位"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in dictionaryStore.filterDictList('MaxUnit')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1" v-if="isNotStage">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="取样范围的单位（月/采样个数）"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>
        </el-row>
        <!-- 其他显示 长期抽检 -->
        <el-row v-if="formData.abilityType == '4' && formData.toolUseType == 1">
          <el-col :span="11">
            <el-form-item label="首次执行时间" prop="firstExecutionTime">
              <el-date-picker
                style="width: 100%"
                v-model="formData.firstExecutionTime"
                :disabled="true"
                type="datetime"
                placeholder="请选择首次执行时间"
                format="YYYY-MM-DD HH"
                value-format="YYYY-MM-DD HH"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" />
          <el-col :span="11" v-if="isNotStage && formData.toolUseType != '2'">
            <el-form-item
              label="计算最低取样时长(天)"
              prop="ruleLowestDuration"
            >
              <el-input
                v-model="formData.ruleLowestDuration"
                placeholder="请输入计算最低取样时长(天)"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :span="1" v-if="isNotStage && formData.toolUseType != '2'">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="趋势图能够开始计算的最小采样时间"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>
          <el-col :span="11">
            <el-form-item label="计算样本最低数量" prop="ruleLowestNum">
              <el-input
                v-model="formData.ruleLowestNum"
                placeholder="请输入计算样本最低数量"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="趋势图能够开始计算的最小采样数"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>

          <el-col :span="11" v-if="isNotStage">
            <el-form-item label="CPK计算周期（小时）" prop="cpkComputeHour">
              <el-input
                v-model="formData.cpkComputeHour"
                placeholder="请输入CPK计算周期（小时）"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" v-if="isNotStage">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="趋势图首次计算后，进行CPK计算的间隔时间"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>

          <el-col :span="11" v-if="isNotStage && formData.abilityType != 4">
            <el-form-item label="取样间隔（小时）" prop="intervalHour">
              <el-input
                v-model="formData.intervalHour"
                placeholder="请输入取样间隔（小时）"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" v-if="isNotStage && formData.abilityType != 4">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="进行采样的间隔时间"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>
          <el-col
            :span="11"
            v-if="formData.abilityType < '5' && formData.toolUseType > 1"
          >
            <el-form-item
              :label="!isNotStage ? '滚动数量' : '样本节拍比对件数'"
              prop="continuousNum"
            >
              <el-input
                v-model="formData.continuousNum"
                :placeholder="`请输入${
                  !isNotStage ? '滚动数量' : '样本节拍比对件数'
                }`"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col
            :span="1"
            v-if="formData.abilityType < '5' && formData.toolUseType > 1"
          >
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              :content="`${
                !isNotStage
                  ? '达到最大范围后，舍弃最早数据'
                  : '趋势图每次采样采集数据，之前必须是连续个数'
              }`"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>
          <el-col :span="11" v-if="isNotStage && formData.toolUseType > 1">
            <el-form-item label="节拍比对倍数" prop="intervalSecond">
              <el-input
                v-model="formData.intervalSecond"
                placeholder="请输入节拍比对倍数"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" v-if="isNotStage && formData.toolUseType > 1">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="趋势图采样数量之间时间间隔小于，则合格采样"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>

          <el-col :span="11" v-if="isNotStage">
            <el-form-item label="取样最大范围" prop="maxRange">
              <el-input
                v-model="formData.maxRange"
                placeholder="请输入取样最大范围"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" v-if="isNotStage">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              :content="
                formData.toolUseType == 2
                  ? '趋势图计算采样数最大范围（按月或按采样数量）'
                  : `满足取样时长${
                      formData.ruleLowestDuration
                        ? formData.ruleLowestDuration
                        : 'n'
                    }天并且最低取样点数小于${
                      formData.ruleLowestNum ? formData.ruleLowestNum : 'n'
                    }`
              "
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>
          <el-col :span="11" v-if="isNotStage">
            <el-form-item label="取样最小范围" prop="minRange">
              <el-input
                v-model="formData.minRange"
                placeholder="请输入取样最小范围"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" v-if="isNotStage">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              :content="
                formData.toolUseType == 2
                  ? '趋势图计算采样数最小范围（按月或按采样数量）'
                  : `满足取样时长${
                      formData.ruleLowestDuration
                        ? formData.ruleLowestDuration
                        : 'n'
                    }天并且最低取样点数小于${
                      formData.ruleLowestNum ? formData.ruleLowestNum : 'n'
                    }`
              "
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>
          <!-- <el-col :span="11" v-if="isNotStage">
            <el-form-item label="取样范围滚动间隔" prop="rollInterval">
              <el-input
                v-model="formData.rollInterval"
                placeholder="请输入取样范围滚动间隔"
                clearable
              />
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="1" v-if="isNotStage">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="达到最大范围后，舍弃最早数据"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col> -->

          <el-col :span="11" v-if="isNotStage">
            <el-form-item label="取样范围单位" prop="maxUnit">
              <el-select
                v-model="formData.maxUnit"
                placeholder="请选择取样范围单位"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in dictionaryStore.filterDictList('MaxUnit')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1" v-if="isNotStage">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="取样范围的单位（月/采样个数）"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>

          <el-col :span="11" v-if="isNotStage">
            <el-form-item label="测量后缀" style="width: 100%">
              <el-select
                v-model="formData.shaftSuffixIdsTwo"
                placeholder="请选择测量后缀"
                multiple
                collapse-tags
                collapse-tags-tooltip
                :max-collapse-tags="1"
                clearable
                filterable
                loading-text="加载中..."
                style="width: 100%"
              >
                <el-option
                  v-for="item in specialInspectionList"
                  :key="item.id"
                  :label="`${item.shaftSuffix}-${item.featureName}`"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 其他显示  特殊 -->
        <el-row v-if="formData.abilityType == '7'">
          <el-col :span="11">
            <el-form-item label="首次执行时间" prop="firstExecutionTime">
              <el-date-picker
                style="width: 100%"
                v-model="formData.firstExecutionTime"
                :disabled="true"
                type="datetime"
                placeholder="请选择首次执行时间"
                format="YYYY-MM-DD HH"
                value-format="YYYY-MM-DD HH"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" />
          <el-col :span="11" v-if="isNotStage && formData.abilityType != '4'">
            <el-form-item
              label="计算最低取样时长(天)"
              prop="ruleLowestDuration"
            >
              <el-input
                v-model="formData.ruleLowestDuration"
                placeholder="请输入计算最低取样时长(天)"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :span="1" v-if="isNotStage && formData.abilityType != '4'">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="趋势图能够开始计算的最小采样时间"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>
          <el-col :span="11">
            <el-form-item label="计算样本最低数量" prop="ruleLowestNum">
              <el-input
                v-model="formData.ruleLowestNum"
                placeholder="请输入计算样本最低数量"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="趋势图能够开始计算的最小采样数"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>

          <el-col :span="11" v-if="isNotStage">
            <el-form-item label="CPK计算周期（小时）" prop="cpkComputeHour">
              <el-input
                v-model="formData.cpkComputeHour"
                placeholder="请输入CPK计算周期（小时）"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" v-if="isNotStage">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="趋势图首次计算后，进行CPK计算的间隔时间"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>

          <el-col :span="11" v-if="isNotStage">
            <el-form-item label="取样最大范围" prop="maxRange">
              <el-input
                v-model="formData.maxRange"
                placeholder="请输入取样最大范围"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" v-if="isNotStage">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="趋势图计算采样数最大范围（按月或按采样数量）"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>
          <el-col :span="11" v-if="isNotStage">
            <el-form-item label="取样最小范围" prop="minRange">
              <el-input
                v-model="formData.minRange"
                placeholder="请输入取样最小范围"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" v-if="isNotStage">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="趋势图计算采样数最小范围（按月或按采样数量）"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>
          <el-col :span="11" v-if="isNotStage">
            <el-form-item label="取样范围单位" prop="maxUnit">
              <el-select
                v-model="formData.maxUnit"
                placeholder="请选择取样范围单位"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in dictionaryStore.filterDictList('MaxUnit')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1" v-if="isNotStage">
            <el-popover
              placement="top-end"
              :width="200"
              trigger="hover"
              content="取样范围的单位（月/采样个数）"
            >
              <template #reference>
                <span class="yellow-icon">
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </template>
            </el-popover>
          </el-col>
        </el-row>
        <el-divider content-position="left" v-if="formData.abilityType != ''">
          <div style="font-weight: 700">报警设置</div>
        </el-divider>
        <!-- 单值图显示 -->
        <el-row
          v-if="formData.abilityType == '0' || formData.abilityType == '1'"
        >
          <el-col :span="11">
            <el-form-item
              :label-width="'220px'"
              label="预警触发：连续超过控制限次数"
              prop="controlRate"
            >
              <el-input
                v-model="formData.controlRate"
                placeholder="预警触发：连续超过控制限次数"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 均值图 -->
        <el-row
          v-if="formData.abilityType == '2' || formData.abilityType == '3'"
        >
          <el-col :span="11">
            <el-form-item
              :label-width="'220px'"
              label="预警触发条件：偏移量"
              prop="controlRate"
            >
              <el-input
                v-model="formData.controlRate"
                placeholder="请输入预警触发条件：偏移量"
                clearable
                :suffixIcon="() => '%'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 长期 -->
        <el-row
          v-if="
            formData.abilityType == '4' ||
            formData.abilityType == '5' ||
            formData.abilityType == '6' ||
            formData.abilityType == '7'
          "
          style="width: 100%"
        >
          <el-col :span="11">
            <el-form-item label="趋势图中cpk值低于" prop="cpkLow">
              <el-input
                v-model="formData.cpkLow"
                placeholder="请输入预警触发: 趋势图中cpk值低于"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item label="趋势图中ppk值低于" prop="ppkLow">
              <el-input
                v-model="formData.ppkLow"
                placeholder="请输入预警触发: 趋势图中ppk值低于"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 过程 -->
        <el-row
          v-if="
            formData.abilityType == '7' ||
            formData.abilityType == '6' ||
            formData.abilityType == '5' ||
            formData.abilityType == '4'
          "
          style="display: flex; justify-content: center"
        />

        <!-- 阶段 -->
        <el-row
          v-if="formData.abilityType == '6'"
          style="display: flex; justify-content: center"
        >
          <p style="width: 80%">
            过程能力趋势图cpk均高于
            <el-form-item
              prop="defaultTall"
              label-width="0"
              :show-message="false"
              style="display: inline-block; margin: 0"
            >
              <el-input v-model="formData.defaultTall" style="width: 60px" />
            </el-form-item>
            并且cpk连续
            <el-form-item
              prop="tallStopover"
              label-width="0"
              :show-message="false"
              style="display: inline-block; margin: 0"
            >
              <el-input v-model="formData.tallStopover" style="width: 60px" />
            </el-form-item>
            次高于
            <el-form-item
              prop="successiveTall"
              label-width="0"
              :show-message="false"
              style="display: inline-block; margin: 0"
            >
              <el-input v-model="formData.successiveTall" style="width: 60px" />
            </el-form-item>
            以上
          </p>
          <p style="width: 80%">
            <!-- 第二段文字 -->

            过程能力趋势图cpk均高于
            <el-form-item
              prop="defaultLow"
              label-width="0"
              :show-message="false"
              style="display: inline-block; margin: 0"
            >
              <el-input v-model="formData.defaultLow" style="width: 60px" />
            </el-form-item>
            并且cpk连续
            <el-form-item
              prop="lowStopover"
              label-width="0"
              :show-message="false"
              style="display: inline-block; margin: 0"
            >
              <el-input v-model="formData.lowStopover" style="width: 60px" />
            </el-form-item>
            次呈持续下降趋势
          </p>
          <el-col :span="18" />
        </el-row>

        <!-- 特殊 -->
        <el-row
          v-if="formData.abilityType == '7'"
          style="display: flex; justify-content: center"
        >
          <p style="width: 80%">
            过程能力趋势图cpk均高于
            <el-form-item
              prop="defaultTall"
              label-width="0"
              style="display: inline-block; margin: 0"
            >
              <el-input v-model="formData.defaultTall" style="width: 60px" />
            </el-form-item>
            并且cpk连续
            <el-form-item
              prop="tallStopover"
              label-width="0"
              style="display: inline-block; margin: 0"
            >
              <el-input v-model="formData.tallStopover" style="width: 60px" />
            </el-form-item>
            次高于
            <el-form-item
              prop="successiveTall"
              label-width="0"
              style="display: inline-block; margin: 0"
            >
              <el-input v-model="formData.successiveTall" style="width: 60px" />
            </el-form-item>
            以上

            <!-- 第二段文字 -->
          </p>
          <p style="width: 80%">
            过程能力趋势图cpk均高于
            <el-form-item
              prop="defaultLow"
              label-width="0"
              style="display: inline-block; margin: 0"
            >
              <el-input v-model="formData.defaultLow" style="width: 60px" />
            </el-form-item>
            并且cpk连续
            <el-form-item
              prop="lowStopover"
              label-width="0"
              style="display: inline-block; margin: 0"
            >
              <el-input v-model="formData.lowStopover" style="width: 60px" />
            </el-form-item>
            次呈持续下降趋势
          </p>
          <el-col :span="18" />
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="发送邮件" @click.stop.prevent>
              <el-switch
                v-model="formData.isEmail"
                inline-prompt
                style="--el-switch-on-color: #13ce66"
                active-value="1"
                inactive-value="0"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" />
          <el-col :span="11">
            <el-form-item label="生成工单" @click.stop.prevent>
              <el-switch
                v-model="formData.isOrder"
                inline-prompt
                style="--el-switch-on-color: #13ce66"
                active-value="1"
                inactive-value="0"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div
        style="
          /* display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          width: 100%; */
        "
        v-if="props.isReadonly"
      >
        <div>
          <!-- <h4>当前详情</h4> -->
          <el-descriptions
            v-show="props.isReadonly"
            title=""
            :column="3"
            border
          >
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">过程质量监控分类</div>
              </template>
              <div style="width: 100%; word-break: break-all">
                {{
                  useDictionary("AbilityTypeMin", formData.abilityType) || ""
                }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">检具用途</div>
              </template>
              <div style="width: 100%; word-break: break-all">
                {{
                  useDictionary("samplingStatus", formData.toolUseType ?? "")
                }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">是否启用</div>
              </template>
              <div>
                <el-tag v-if="formData.enabled == '0'" type="info">停用</el-tag>
                <el-tag v-if="formData.enabled == '1'" type="success"
                  >启用
                </el-tag>
              </div>
            </el-descriptions-item>

            <el-descriptions-item :span="3">
              <template #label>
                <div class="cell-item">监控描述</div>
              </template>
              <div style="width: 100%; word-break: break-all">
                {{ formData.memo }}
              </div>
            </el-descriptions-item>

            <!-- 单值图 0 -->
            <div v-if="formData.abilityType == '0'">
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">控制线上限收严比例</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.upLine || "" }}{{ formData.upLine ? "%" : "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">控制线下限收严比例</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.downLine || ""
                  }}{{ formData.downLine ? "%" : "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">单值图默认展示数量</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.sampleNum || "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">取样数据集上限</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.maxCount || "" }}
                </div>
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">预警触发：连续超过控制限次数</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.controlRate || "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">发送邮件</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.isEmail == "1" ? "是" : "否" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">生成工单</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.isOrder == "1" ? "是" : "否" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">取样频度</div>
                </template>
                <div style="width: 100%; word-break: break-all">100%</div>
              </el-descriptions-item>
            </div>
            <!-- 均值图2 -->
            <div v-if="formData.abilityType == '2'">
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">均值图默认展示数量</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.sampleNum || "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">子组样本数量</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.groupingNum || "" }}
                </div>
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">取样数据集上限</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.maxCount || "" }}
                </div>
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">预警触发条件：偏移量</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.controlRate || ""
                  }}{{ formData.controlRate ? "%" : "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">发送邮件</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.isEmail == "1" ? "是" : "否" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">生成工单</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.isOrder == "1" ? "是" : "否" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">取样频度</div>
                </template>
                <div style="width: 100%; word-break: break-all">100%</div>
              </el-descriptions-item>
            </div>

            <!-- 长期 -->

            <div v-if="formData.abilityType == '4'">
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">首次执行时间</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.firstExecutionTime || "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item
                v-if="isNotStage && formData.toolUseType == '2'"
              >
                <template #label>
                  <div class="cell-item">取样间隔（小时）</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.intervalHour || "" }}
                </div>
              </el-descriptions-item>

              <el-descriptions-item v-if="formData.toolUseType == '2'">
                <template #label>
                  <div class="cell-item">
                    {{ "样本节拍比对件数" }}
                  </div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.continuousNum || "" }}
                </div>
              </el-descriptions-item>

              <el-descriptions-item v-if="formData.toolUseType == '2'">
                <template #label>
                  <div class="cell-item">节拍比对倍数</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.intervalSecond || "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item v-if="formData.toolUseType == '1'">
                <template #label>
                  <div class="cell-item">计算最低取样时长(天)</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.ruleLowestDuration || "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">计算样本最低数量</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.ruleLowestNum || "" }}
                </div>
              </el-descriptions-item>

              <el-descriptions-item v-if="isNotStage">
                <template #label>
                  <div class="cell-item">CPK计算周期（小时）</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.cpkComputeHour || "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item v-if="isNotStage">
                <template #label>
                  <div class="cell-item">取样最大范围</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.maxRange || "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item v-if="isNotStage">
                <template #label>
                  <div class="cell-item">取样最小范围</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.minRange || "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item v-if="isNotStage">
                <template #label>
                  <div class="cell-item">取样范围单位</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ useDictionary("MaxUnit", formData.maxUnit) || "" }}
                </div>
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">趋势图中cpk值低于</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.cpkLow || "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">趋势图中ppk值低于</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.ppkLow || "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">发送邮件</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.isEmail == "1" ? "是" : "否" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">生成工单</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.isOrder == "1" ? "是" : "否" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">测量后缀</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.shaftSuffixCodes }}
                </div>
              </el-descriptions-item>
            </div>

            <!-- 阶段-短期 -->
            <div v-if="formData.abilityType == '6'">
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">计算样本最低数量</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.ruleLowestNum || "" }}
                </div>
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    {{ isNotStage ? "滚动数量" : "样本节拍比对件数" }}
                  </div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.continuousNum || "" }}
                </div>
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">趋势图中cpk值低于</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.cpkLow || "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">趋势图中ppk值低于</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.ppkLow || "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">发送邮件</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.isEmail == "1" ? "是" : "否" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">生成工单</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.isOrder == "1" ? "是" : "否" }}
                </div>
              </el-descriptions-item>
            </div>

            <!-- 子类别 -->
            <div v-if="formData.abilityType == '7'">
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">首次执行时间</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.firstExecutionTime || "" }}
                </div>
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">计算最低取样时长(天)</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.ruleLowestDuration || "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">计算样本最低数量</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.ruleLowestNum || "" }}
                </div>
              </el-descriptions-item>

              <!-- <el-descriptions-item>
                <template #label>
                  <div class="cell-item">趋势图中cpk值低于</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.cpkLow || "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">趋势图中ppk值低于</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.ppkLow || "" }}
                </div>
              </el-descriptions-item> -->
              <el-descriptions-item v-if="isNotStage">
                <template #label>
                  <div class="cell-item">CPK计算周期（小时）</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.cpkComputeHour || "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item v-if="isNotStage">
                <template #label>
                  <div class="cell-item">取样最大范围</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.maxRange || "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item v-if="isNotStage">
                <template #label>
                  <div class="cell-item">取样最小范围</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.minRange || "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item v-if="isNotStage">
                <template #label>
                  <div class="cell-item">取样范围单位</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ useDictionary("MaxUnit", formData.maxUnit) || "" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">发送邮件</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.isEmail == "1" ? "是" : "否" }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">生成工单</div>
                </template>
                <div style="width: 100%; word-break: break-all">
                  {{ formData.isOrder == "1" ? "是" : "否" }}
                </div>
              </el-descriptions-item>
            </div>
          </el-descriptions>
          <!-- 短期 子类别 文字 -->
          <el-row
            v-if="
              (formData.abilityType == '6' || formData.abilityType == '7') &&
              props.isReadonly
            "
            style="display: flex"
          >
            <p>
              过程能力趋势图cpk均高于
              <el-form-item
                prop="defaultTall"
                label-width="0"
                style="display: inline-block; margin: 0"
              >
                <el-input
                  disabled
                  v-model="formData.defaultTall"
                  style="width: 60px"
                />
              </el-form-item>
              并且cpk连续
              <el-form-item
                prop="tallStopover"
                label-width="0"
                style="display: inline-block; margin: 0"
              >
                <el-input
                  disabled
                  v-model="formData.tallStopover"
                  style="width: 60px"
                />
              </el-form-item>
              次高于
              <el-form-item
                prop="successiveTall"
                label-width="0"
                style="display: inline-block; margin: 0"
              >
                <el-input
                  disabled
                  v-model="formData.successiveTall"
                  style="width: 60px"
                />
              </el-form-item>
              以上
            </p>

            <!-- 第二段文字 -->
            <p>
              过程能力趋势图中的点均低于
              <el-form-item
                prop="defaultLow"
                label-width="0"
                style="display: inline-block; margin: 0"
              >
                <el-input
                  disabled
                  v-model="formData.defaultLow"
                  style="width: 60px"
                />
              </el-form-item>
              并且cpk连续
              <el-form-item
                prop="lowStopover"
                label-width="0"
                style="display: inline-block; margin: 0"
              >
                <el-input
                  disabled
                  v-model="formData.lowStopover"
                  style="width: 60px"
                />
              </el-form-item>
              次呈持续下降趋势
            </p>
          </el-row>
        </div>
      </div>

      <div v-if="remarkList && remarkList.length" style="margin-left: 0px">
        <el-divider content-position="left">
          <div style="font-weight: 700">
            变更履历
            <span
              style="
                font-weight: 700;
                font-size: 13px;
                color: #409eff;
                cursor: pointer;
                padding-left: 10px;
              "
              @click="showOperationRecord"
            >
              <i-ep-sort />排序
            </span>
          </div>
        </el-divider>
        <!-- <h4 class="mb-[5px] flex justify-between">
          <span class="text-[15px]">备注履历</span>
          <span
            style="
              font-weight: 700;
              font-size: 13px;
              color: #409eff;
              cursor: pointer;
              padding-left: 10px;
            "
            @click="showOperationRecord"
          >
            <i-ep-sort /> 排序
          </span>
        </h4> -->
        <el-table
          highlight-current-row
          border
          :data="remarkList"
          max-height="280"
          style="width: 100%"
        >
          <el-table-column
            prop="lastUpdateTime"
            label="更新时间"
            width="180"
            align="center"
          />
          <el-table-column
            prop="lastUpdatedUserName"
            label="更新人"
            width="180"
            align="center"
          />
          <el-table-column prop="remarks" label="变更履历说明" />
          <el-table-column label="变更内容明细" min-width="250">
            <template #default="scope">
              <el-descriptions
                v-if="scope.row?.changeInfo?.diff"
                :column="2"
                border
                title=""
                size="small"
              >
                <el-descriptions-item
                  v-for="(key, index) in Object.keys(
                    scope.row?.changeInfo?.diff
                  )"
                  :key="index"
                  :label="scope.row?.changeInfo?.diff[key]?.label"
                  :span="getSpanNum(key)"
                >
                  <span class="c-[#666]">{{
                    filterValue(scope.row?.changeInfo?.diff, key, "value1")
                  }}</span>
                  <span class="font-600 px-[5px] c-[#b1b3b8]"
                    ><svg-icon icon-class="right" class="mr-0!"
                  /></span>
                  <span class="c-[#ff0000]">{{
                    filterValue(scope.row?.changeInfo?.diff, key, "value2")
                  }}</span></el-descriptions-item
                >
              </el-descriptions>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button
            v-if="!props.isReadonly && formData.programId && formData.id"
            type="danger"
            :loading="loading"
            @click="deleteItem(formData.id)"
            >删 除
          </el-button>
          <el-button
            v-if="!props.isReadonly"
            type="primary"
            :loading="loading"
            @click="configSubmit"
            >确 定
          </el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="dialogVisible"
      title="提示"
      width="780"
      draggable
      align-center
      :close-on-click-modal="false"
    >
      <div class="change_des">
        <div class="text-[15px] mb-[4px] mt-[-4px] c-[#333]">变更内容明细</div>
        <el-descriptions :column="2" border title="">
          <el-descriptions-item
            v-for="(key, index) in Object.keys(diffData)"
            :key="index"
            :label="diffData[key].label"
            :span="getSpanNum(key)"
          >
            <span class="c-[#666]">{{
              filterValue(diffData, key, "value1")
            }}</span>
            <span class="font-600 px-[5px] c-[#b1b3b8]"
              ><svg-icon icon-class="right" class="mr-0!"
            /></span>
            <span class="c-[#ff0000]">{{
              filterValue(diffData, key, "value2")
            }}</span></el-descriptions-item
          >
        </el-descriptions>

        <div class="text-[15px] mb-[4px] mt-[12px] c-[#333]">
          变更内容说明(必填)
        </div>
        <el-input
          v-model="changeDescription"
          style="width: 100%"
          :rows="3"
          type="textarea"
          placeholder="请输入变更内容说明"
        />
      </div>
      <!-- <span>This is a message</span> -->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="beforeSubmit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
import { QuestionFilled } from "@element-plus/icons-vue";
import { useDictionary } from "../../../../utils/useTable";
import dayjs from "dayjs";
import { deepClone, validateIsNumber } from "@/utils/commonHooks";
import { filterLable, shallowCompare } from "./index";

const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "PCMCONFIGMEASUREMENTSEDIT",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  abilityType: {
    type: String,
    default: () => {
      return "";
    },
  },
});

const isNotStage = ref(true);

const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;

    if (formData.id == "" || formData.id == undefined) {
      formData.firstExecutionTime = dayjs(new Date()).format("YYYY-MM-DD HH");
      formData.abilityType = props.abilityType;
      console.log(formData.abilityType, formData.toolUseType);

      if (
        formData.abilityType == "0" ||
        formData.abilityType == "2" ||
        formData.abilityType == "4"
      ) {
        // formData.toolUseType = "2";
      } else {
        console.log(222);

        formData.toolUseType = "1";
      }
      if (formData.abilityType == "" || formData.abilityType == null) {
        formData.toolUseType = "";
        formData.memo = "";
      } else {
        monitoringDescription.forEach((item) => {
          if (formData.abilityType == item.value) {
            formData.memo = item.label;
          }
        });
      }
    }

    setTimeout(() => {
      formRef.value.clearValidate();
    }, 50);
  }
);

let monitoringDescription = [
  {
    label:
      "从质量数据库中提取100%测量特性的测量数据，按照展示数量形成单值图进行过程分析，并进行预警报警",
    value: "0",
  },
  {
    label:
      "从质量数据库中提取抽检测量特性的测量数据，按照展示数量形成单值图进行过程分析，并进行预警报警",
    value: "1",
  },
  {
    label:
      "从质量数据库中提取100%测量特性的测量数据，根据子组样本数量，按照展示数量形成均值图进行过程分析，并进行预警报警",
    value: "2",
  },
  {
    label:
      "从质量数据库中提取抽检测量特性的测量数据，根据子组样本数量，按照展示数量形成均值图进行过程分析，并进行预警报警",
    value: "3",
  },
  {
    label:
      "从质量数据库中提取100%测量特性的测量数据，根据制定的取样规则及频度，按照固定时间计算并展示过程能力进行分析，并进行预警报警",
    value: "4",
  },
  {
    label:
      "从质量数据库中提取抽检测量特性的测量数据，根据制定的取样规则及频度，按照固定时间计算并展示过程能力进行分析，并进行预警报警",
    value: "5",
  },
  {
    label:
      "从质量数据库中提取抽检测量特性的测量数据，根据制定的取样规则及频度，按照固定的样本量计算并展示过程能力进行分析，并进行预警报警",
    value: "6",
  },
  {
    label:
      "从质量数据库中提取抽检测量特性的测量数据，根据控制计划要求的送检分类，按照不同送检代码后缀计算并展示过程能力进行分析，并进行预警报警",
    value: "7",
  },
];

const rules = reactive({
  countRuleCode: [
    { required: true, message: "请输入取样规则编码", trigger: "change" },
    { max: 20, message: "规则编码不能超过20个字符", trigger: "blur" },
  ],
  abilityType: [
    { required: true, message: "请选择过程质量监控分类", trigger: "change" },
  ],
  ruleLowestNum: [
    { required: true, message: "请输入计算样本最低数量", trigger: "change" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  ruleLowestDuration: [
    {
      required: true,
      message: "请输入计算最低取样时长(天)",
      trigger: "change",
    },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  continuousNum: [
    { required: true, message: "请输入数量", trigger: "change" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  intervalSecond: [
    { required: true, message: "请输入节拍比对倍数", trigger: "change" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  firstExecutionTime: [
    { required: true, message: "请选择首次执行时间", trigger: "change" },
  ],
  intervalHour: [
    { required: true, message: "请输入取样间隔（小时）", trigger: "change" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  cpkComputeHour: [
    { required: true, message: "请输入CPK计算周期（小时）", trigger: "change" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  maxRange: [
    { required: true, message: "请输入取样最大范围", trigger: "change" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  minRange: [
    { required: true, message: "请输入取样最小范围", trigger: "change" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  rollInterval: [
    { required: true, message: "请输入取样范围滚动间隔", trigger: "change" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  maxUnit: [
    { required: true, message: "请选择取样最大范围单位", trigger: "change" },
  ],

  sampleNum: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  /**
   * 是否预警(单值,均值,长期,阶段, 特殊)
   */
  isWarn: [{ required: true, message: "请选择", trigger: "change" }],
  /**
   * 连续超过控制限次数(单值,均值,长期)
   */
  controlRate: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  /**
   * 连续超过控制限次数(单值,均值,长期)
   */
  cpkLow: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  /**
   * 连续超过控制限次数(单值,均值,长期)
   */
  ppkLow: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  /**
   * 上限比例(单值)
   */
  upLine: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  /**
   * 下限比例(单值)
   */
  downLine: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  /**
   * 分组测量值个数(均值)
   */
  groupingNum: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  /**
   * 默认高于值(阶段, 特殊)
   */
  defaultTall: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  /**
   * 连续高于次数(阶段, 特殊)
   */
  tallStopover: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  /**
   * 连续高于值(阶段, 特殊)
   */
  successiveTall: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  /**
   * 连续低于次数(阶段, 特殊)
   */
  lowStopover: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  /**
   * 默认低于值(阶段, 特殊)
   */
  defaultLow: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  /**
   * 首次调查时间(长期, 阶段, 特殊)
   */
  checkHour: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  /**
   * 更新时间(长期, 阶段, 特殊)
   */
  updateHour: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
  /**
   * 升级次数(长期, 阶段, 特殊)
   */
  escalateStopover: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      validator: validateIsNumber,
      trigger: "blur",
    },
  ],
});

const formRef = ref(ElForm);

let formData = reactive({
  id: "",
  countRuleCode: "",
  programId: "",
  abilityType: "",
  ruleLowestNum: "",
  ruleLowestDuration: "",
  continuousNum: "",
  intervalSecond: "",
  firstExecutionTime: "",
  intervalHour: "",
  cpkComputeHour: "",
  maxRange: "",
  rollInterval: "",
  maxUnit: "",
  version: "",
  enabled: "",
  deleted: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  lastUpdateTime: "",
  gageEquipToolKind: "",
  toolUseType: "2",
  //后加
  /**
   * 默认样本个数(单值,均值)
   */
  sampleNum: "",
  /**
   * 是否预警(单值,均值,长期,阶段, 特殊)
   */
  isWarn: "",
  /**
   * 连续超过控制限次数(单值,均值,长期)
   */
  controlRate: "",
  /**
   * 最低值报警
   */
  cpkLow: "",
  ppkLow: "",
  /**
   * 上限比例(单值)
   */
  upLine: "",
  /**
   * 下限比例(单值)
   */
  downLine: "",
  /**
   * 分组测量值个数(均值)
   */
  groupingNum: "",
  /**
   * 默认高于值(阶段, 特殊)
   */
  defaultTall: "",
  /**
   * 连续高于次数(阶段, 特殊)
   */
  tallStopover: "",
  /**
   * 连续高于值(阶段, 特殊)
   */
  successiveTall: "",
  /**
   * 连续低于次数(阶段, 特殊)
   */
  lowStopover: "",
  /**
   * 默认低于值(阶段, 特殊)
   */
  defaultLow: "",
  /**
   * 首次调查时间(长期, 阶段, 特殊)
   */
  checkHour: "",
  /**
   * 更新时间(长期, 阶段, 特殊)
   */
  updateHour: "",
  /**
   * 升级次数(长期, 阶段, 特殊)
   */
  escalateStopover: "",
  remarks: "",
  memo: "",
  isEmail: "1",
  isOrder: "1",
  maxCount: "10000",
  minRange: "",
  samplingFrequency: "100%",
  changeInfo: "",
  shaftSuffixIds: "",
  shaftSuffixNames: "",
  shaftSuffixCodes: "",
  shaftSuffixIdsTwo: [],
});

watch(
  () => props.data,
  async (newVal: any) => {
    formData.id = "";
    if (newVal?.id) {
      const {
        id,
        countRuleCode,
        programId,
        abilityType,
        ruleLowestNum,
        ruleLowestDuration,
        continuousNum,
        intervalSecond,
        intervalHour,
        firstExecutionTime,
        cpkComputeHour,
        maxRange,
        rollInterval,
        maxUnit,
        version,
        enabled,
        deleted,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdatedUserId,
        lastUpdatedUserName,
        lastUpdateTime,
        gageEquipToolKind,
        sampleNum,
        toolUseType,
        /**
         * 是否预警(单值,均值,长期,阶段, 特殊)
         */
        isWarn,
        /**
         * 连续超过控制限次数(单值,均值,长期)
         */
        controlRate,
        cpkLow,
        ppkLow,
        isEmail,
        isOrder,
        maxCount,
        /**
         * 上限比例(单值)
         */
        upLine,
        /**
         * 下限比例(单值)
         */
        downLine,
        /**
         * 分组测量值个数(均值)
         */
        groupingNum,
        /**
         * 默认高于值(阶段, 特殊)
         */
        defaultTall,
        /**
         * 连续高于次数(阶段, 特殊)
         */
        tallStopover,
        /**
         * 连续高于值(阶段, 特殊)
         */
        successiveTall,
        /**
         * 连续低于次数(阶段, 特殊)
         */
        lowStopover,
        /**
         * 默认低于值(阶段, 特殊)
         */
        defaultLow,
        /**
         * 首次调查时间(长期, 阶段, 特殊)
         */
        checkHour,
        /**
         * 更新时间(长期, 阶段, 特殊)
         */
        updateHour,
        /**
         * 升级次数(长期, 阶段, 特殊)
         */

        remarks,
        memo,
        escalateStopover,
        minRange,
        shaftSuffixIds,
        shaftSuffixNames,
        shaftSuffixCodes,
        shaftSuffixIdsTwo,
      } = newVal;
      Object.assign(formData, {
        id,
        countRuleCode,
        programId,
        abilityType,
        ruleLowestNum,
        ruleLowestDuration,
        continuousNum,
        intervalSecond,
        intervalHour,
        firstExecutionTime,
        cpkComputeHour,
        maxRange,
        rollInterval,
        maxUnit: maxUnit ?? undefined,
        version,
        enabled,
        deleted,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdatedUserId,
        lastUpdatedUserName,
        lastUpdateTime,
        gageEquipToolKind,
        sampleNum,
        toolUseType,
        /**
         * 是否预警(单值,均值,长期,阶段, 特殊)
         */
        isWarn,
        /**
         * 连续超过控制限次数(单值,均值,长期)
         */
        controlRate,
        cpkLow,
        ppkLow,
        isEmail: isEmail.toString() ?? "0",
        isOrder: isOrder.toString() ?? "0",
        maxCount,
        /**
         * 上限比例(单值)
         */
        upLine,
        /**
         * 下限比例(单值)
         */
        downLine,
        /**
         * 分组测量值个数(均值)
         */
        groupingNum,
        /**
         * 默认高于值(阶段, 特殊)
         */
        defaultTall,
        /**
         * 连续高于次数(阶段, 特殊)
         */
        tallStopover,
        /**
         * 连续高于值(阶段, 特殊)
         */
        successiveTall,
        /**
         * 连续低于次数(阶段, 特殊)
         */
        lowStopover,
        /**
         * 默认低于值(阶段, 特殊)
         */
        defaultLow,
        /**
         * 首次调查时间(长期, 阶段, 特殊)
         */
        checkHour,
        /**
         * 更新时间(长期, 阶段, 特殊)
         */
        updateHour,
        /**
         * 升级次数(长期, 阶段, 特殊)
         */
        remarks,
        memo,
        escalateStopover,
        minRange,
        shaftSuffixIds,
        shaftSuffixNames,
        shaftSuffixCodes,
        shaftSuffixIdsTwo,
      });
      getRemarks(id);
      console.log(id);
      formData.abilityType = JSON.stringify(formData.abilityType);
      formData.maxUnit = JSON.stringify(formData.maxUnit);

      console.log(formData);
    }

    if (newVal?.abilityType) {
      formData.abilityType = newVal.abilityType.toString();
    }
    if (
      formData.abilityType == "0" ||
      formData.abilityType == "2" ||
      formData.abilityType == "4"
    ) {
      // formData.toolUseType = "2";
    } else {
      formData.toolUseType = "1";
    }
    if (newVal?.programId) {
      formData.programId = newVal.programId;
    }

    orignFormData.value = deepClone(formData);
    diffData.value = {};
    diffDataChart.value = {};
    changeDescription.value = "";

    formData.shaftSuffixIdsTwo = formData.shaftSuffixIds
      ? formData.shaftSuffixIds.split(",")
      : [];
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  resetForm();
  emit("reset-table", formData.id);
  emit("change-visible", false);
}

// 查询详情
async function getInfo(id: string) {
  request({
    url: `/dmpDosPcm/pcmconfigmeasurements/get/${id}`,
    method: "get",
  })
    .then((res) => {
      const {
        id,
        countRuleCode,
        programId,
        abilityType,
        ruleLowestNum,
        ruleLowestDuration,
        continuousNum,
        intervalSecond,
        intervalHour,
        firstExecutionTime,
        cpkComputeHour,
        maxRange,
        rollInterval,
        maxUnit,
        version,
        enabled,
        deleted,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdatedUserId,
        lastUpdatedUserName,
        lastUpdateTime,
        gageEquipToolKind,
        sampleNum,
        toolUseType,
        /**
         * 是否预警(单值,均值,长期,阶段, 特殊)
         */
        isWarn,
        /**
         * 连续超过控制限次数(单值,均值,长期)
         */
        controlRate,
        cpkLow,
        ppkLow,
        isEmail,
        isOrder,
        maxCount,
        /**
         * 上限比例(单值)
         */
        upLine,
        /**
         * 下限比例(单值)
         */
        downLine,
        /**
         * 分组测量值个数(均值)
         */
        groupingNum,
        /**
         * 默认高于值(阶段, 特殊)
         */
        defaultTall,
        /**
         * 连续高于次数(阶段, 特殊)
         */
        tallStopover,
        /**
         * 连续高于值(阶段, 特殊)
         */
        successiveTall,
        /**
         * 连续低于次数(阶段, 特殊)
         */
        lowStopover,
        /**
         * 默认低于值(阶段, 特殊)
         */
        defaultLow,
        /**
         * 首次调查时间(长期, 阶段, 特殊)
         */
        checkHour,
        /**
         * 更新时间(长期, 阶段, 特殊)
         */
        updateHour,
        /**
         * 升级次数(长期, 阶段, 特殊)
         */

        remarks,
        memo,
        escalateStopover,
        minRange,
        shaftSuffixIds,
        shaftSuffixNames,
        shaftSuffixCodes,
        shaftSuffixIdsTwo,
      } = res.data;
      Object.assign(formData, {
        id,
        countRuleCode,
        programId,
        abilityType,
        ruleLowestNum,
        ruleLowestDuration,
        continuousNum,
        intervalSecond,
        intervalHour,
        firstExecutionTime,
        cpkComputeHour,
        maxRange,
        rollInterval,
        maxUnit: maxUnit ?? undefined,
        version,
        enabled,
        deleted,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdatedUserId,
        lastUpdatedUserName,
        lastUpdateTime,
        gageEquipToolKind,
        sampleNum,
        toolUseType,
        /**
         * 是否预警(单值,均值,长期,阶段, 特殊)
         */
        isWarn,
        /**
         * 连续超过控制限次数(单值,均值,长期)
         */
        controlRate,
        cpkLow,
        ppkLow,
        isEmail: isEmail.toString() ?? "0",
        isOrder: isOrder.toString() ?? "0",
        maxCount,
        /**
         * 上限比例(单值)
         */
        upLine,
        /**
         * 下限比例(单值)
         */
        downLine,
        /**
         * 分组测量值个数(均值)
         */
        groupingNum,
        /**
         * 默认高于值(阶段, 特殊)
         */
        defaultTall,
        /**
         * 连续高于次数(阶段, 特殊)
         */
        tallStopover,
        /**
         * 连续高于值(阶段, 特殊)
         */
        successiveTall,
        /**
         * 连续低于次数(阶段, 特殊)
         */
        lowStopover,
        /**
         * 默认低于值(阶段, 特殊)
         */
        defaultLow,
        /**
         * 首次调查时间(长期, 阶段, 特殊)
         */
        checkHour,
        /**
         * 更新时间(长期, 阶段, 特殊)
         */
        updateHour,
        /**
         * 升级次数(长期, 阶段, 特殊)
         */
        remarks,
        memo,
        escalateStopover,
        minRange,
        shaftSuffixIds,
        shaftSuffixNames,
        shaftSuffixCodes,
        shaftSuffixIdsTwo,
      });
      getRemarks(id);
      console.log(id);
      formData.abilityType = JSON.stringify(formData.abilityType);
      formData.maxUnit = JSON.stringify(formData.maxUnit);
      orignFormData.value = deepClone(formData);

      changeDescription.value = "";

      diffData.value = JSON.parse(JSON.stringify({}));
      diffDataChart.value = JSON.parse(JSON.stringify({}));
      console.log(formData);
      formData.shaftSuffixIdsTwo = formData.shaftSuffixIds.split(",") || [];
    })
    .catch((res) => {
      console.log(res);
    });
}

/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.id = "";
  formData.countRuleCode = "";
  formData.programId = "";
  formData.abilityType = "";
  formData.ruleLowestNum = "";
  formData.ruleLowestDuration = "";
  formData.continuousNum = "";
  formData.intervalSecond = "";
  formData.intervalHour = "";
  // formData.firstExecutionTime = "";
  formData.cpkComputeHour = "";
  formData.maxRange = "";
  formData.rollInterval = "";
  formData.maxUnit = "";
  formData.version = "";
  formData.enabled = "";
  formData.deleted = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdatedUserName = "";
  formData.lastUpdateTime = "";
  formData.gageEquipToolKind = "";
  formData.toolUseType = "";
  formData.shaftSuffixIds = "";
  formData.shaftSuffixNames = "";
  formData.shaftSuffixCodes = "";
  formData.shaftSuffixIdsTwo = [];

  //后加
  /**
   * 默认样本个数(单值,均值)
   */
  formData.sampleNum = "";
  /**
   * 是否预警(单值,均值,长期,阶段, 特殊)
   */
  formData.isWarn = "";
  /**
   * 连续超过控制限次数(单值,均值,长期)
   */
  formData.controlRate = "";
  formData.cpkLow = "";
  formData.ppkLow = "";
  formData.isEmail = "1";
  formData.isOrder = "1";
  formData.maxCount = "10000";
  /**
   * 上限比例(单值)
   */
  formData.upLine = "";
  /**
   * 下限比例(单值)
   */
  formData.downLine = "";
  /**
   * 分组测量值个数(均值)
   */
  formData.groupingNum = "";
  /**
   * 默认高于值(阶段, 特殊)
   */
  formData.defaultTall = "";
  /**
   * 连续高于次数(阶段, 特殊)
   */
  formData.tallStopover = "";
  /**
   * 连续高于值(阶段, 特殊)
   */
  formData.successiveTall = "";
  /**
   * 连续低于次数(阶段, 特殊)
   */
  formData.lowStopover = "";
  /**
   * 默认低于值(阶段, 特殊)
   */
  formData.defaultLow = "";
  /**
   * 首次调查时间(长期, 阶段, 特殊)
   */
  formData.checkHour = "";
  /**
   * 更新时间(长期, 阶段, 特殊)
   */
  formData.updateHour = "";
  /**
   * 升级次数(长期, 阶段, 特殊)
   */
  formData.escalateStopover = "";
  formData.remarks = "";
  formData.memo = "";
  formData.minRange = "";
}

//改变之后 重置

const restForm = () => {
  formData.countRuleCode = "";
  formData.programId = "";

  formData.ruleLowestNum = "";
  formData.ruleLowestDuration = "";
  formData.continuousNum = "";
  formData.intervalSecond = "";
  formData.intervalHour = "";
  // formData.firstExecutionTime = "";
  formData.cpkComputeHour = "";
  formData.maxRange = "";
  formData.rollInterval = "";
  formData.maxUnit = "";

  //后加
  /**
   * 默认样本个数(单值,均值)
   */
  formData.sampleNum = "";
  /**
   * 是否预警(单值,均值,长期,阶段, 特殊)
   */
  formData.isWarn = "";
  /**
   * 连续超过控制限次数(单值,均值,长期)
   */
  formData.controlRate = "";
  /**
   * 上限比例(单值)
   */
  formData.upLine = "";
  /**
   * 下限比例(单值)
   */
  formData.downLine = "";
  /**
   * 分组测量值个数(均值)
   */
  formData.groupingNum = "";
  /**
   * 默认高于值(阶段, 特殊)
   */
  formData.defaultTall = "";
  /**
   * 连续高于次数(阶段, 特殊)
   */
  formData.tallStopover = "";
  /**
   * 连续高于值(阶段, 特殊)
   */
  formData.successiveTall = "";
  /**
   * 连续低于次数(阶段, 特殊)
   */
  formData.lowStopover = "";
  /**
   * 默认低于值(阶段, 特殊)
   */
  formData.defaultLow = "";
  /**
   * 首次调查时间(长期, 阶段, 特殊)
   */
  formData.checkHour = "";
  /**
   * 更新时间(长期, 阶段, 特殊)
   */
  formData.updateHour = "";
  /**
   * 升级次数(长期, 阶段, 特殊)
   */
  formData.escalateStopover = "";
  formData.remarks = "";
  formData.memo = "";
  formData.minRange = "";
  formData.shaftSuffixIds = "";
  formData.shaftSuffixNames = "";
  formData.shaftSuffixCodes = "";
  formData.shaftSuffixIdsTwo = [];
};

const loading = ref(false);

/** 测量数据取样配置保存提交 */
async function handleSubmit() {
  loading.value = true;
  const text = formData.id ? "编辑" : "新增";
  // 变更履历详情
  let changeInfoText = {
    diff: toRaw(diffData.value),
  };
  formData.changeInfo = JSON.stringify(changeInfoText);
  // if (formData.abilityType === "3") {
  //   formData.ruleLowestDuration = "";
  //   formData.intervalSecond = "";
  //   formData.intervalHour = "";
  //   formData.cpkComputeHour = "";
  //   formData.maxRange = "";
  //   formData.rollInterval = "";
  //   formData.maxUnit = "";
  // }
  await request({
    url: "/dmpDosPcm/pcmconfigmeasurements/save",
    method: "post",
    data: formData,
  }).finally(() => {
    loading.value = false;
    dialogVisible.value = false;
  });
  ElMessage.success(text + `成功`);
  resetForm();
  if (props.data.id) {
    getInfo(props.data.id);
  } else {
    // closeDialog();
    // emit("reset-table", formData.id);
  }
}

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});

watch(
  () => formData.abilityType,
  (newVal) => {
    isNotStage.value = newVal !== "3";
  },
  { deep: true }
);

const deleteItem = (id) => {
  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const { data } = await request({
      url: `/dmpDosPcm/pcmconfigmeasurements/deleteItem/${id}`,
      method: "post",
    }).then(() => {
      ElMessage.success("删除成功");
      closeDialog();
    });
  });
};

const abilityTypeChange = (e) => {
  if (e) {
    restForm();
    monitoringDescription.forEach((item) => {
      if (formData.abilityType == item.value) {
        formData.memo = item.label;
      }
    });

    if (!formData.id) {
      // console.log(222);

      formData.firstExecutionTime = dayjs(new Date()).format("YYYY-MM-DD HH");
      console.log(formData.firstExecutionTime);
    }
    if (
      formData.abilityType == "0" ||
      formData.abilityType == "2" ||
      formData.abilityType == "4"
    ) {
      formData.toolUseType = "2";
    } else if (formData.abilityType == "6") {
      formData.toolUseType = "1";
    } else if (formData.abilityType == "7") {
      formData.toolUseType = "1";
    } else {
      formData.toolUseType = "1";
    }
  } else {
    formData.toolUseType = "";
    formData.memo = "";
  }
};

const toolUseTypeChange = (e) => {
  restForm();
  let num;
  if (e == 1) {
    num = Number(formData.abilityType) + 1;
  } else {
    num = formData.abilityType;
  }

  monitoringDescription.forEach((item) => {
    if (num == item.value) {
      formData.memo = item.label;
    }
  });
};

const mockChangeInfo = {
  diff: {
    sampleNum: {
      value1: 50,
      value2: "501",
      label: "单值图默认节点展示数量",
    },
    controlRate: {
      value1: 5,
      value2: "51",
      label: "预警触发：连续超过控制限次数",
    },
  },
};

const remarkList = ref([]);

async function getRemarks(id: string) {
  remarkList.value = [];
  const res: any = await request({
    url: "/dmpDosPcm/pcmconfigmeasurements/getRecordRemarks",
    method: "get",
    params: { id },
  }).catch(() => {});
  let a = res.data;
  a?.forEach((e) => {
    e.changeInfo = JSON.parse(e.changeInfo);
  });
  remarkList.value = a || [];
}

// 获取原始数据的数据
let orignFormData = ref<any>({});
let diffData = ref<any>({});
let diffDataChart = ref<any>({});
const keyArr = ["defaultTall", "tallStopover", "successiveTall"];
const keyArr1 = ["lowStopover", "defaultLow"];
function getSpanNum(key: string) {
  if (key === "memo" || key === "showBaoJing" || key === "showBaoJing1") {
    return 2;
  } else {
    return 1;
  }
}

const changeDescription = ref("");
function configSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      let shaftSuffixNames = [];
      let shaftSuffixCodes = [];
      let shaftSuffixIds = [];
      specialInspectionList.value.forEach((element) => {
        formData.shaftSuffixIdsTwo.forEach((item) => {
          if (element.id == item) {
            shaftSuffixIds.push(element.id);
            shaftSuffixNames.push(element.featureName);
            shaftSuffixCodes.push(element.shaftSuffix);
          }
        });
      });

      formData.shaftSuffixIds = shaftSuffixIds.join(",") || "";
      formData.shaftSuffixCodes = shaftSuffixCodes.join(",") || "";
      formData.shaftSuffixNames = shaftSuffixNames.join(",") || "";
      console.log("formData.shaftSuffixIdsTwo", formData.shaftSuffixIdsTwo);

      if (!formData.id) {
        handleSubmit();
      } else {
        // 取出变更项
        const diff = shallowCompare(
          JSON.parse(JSON.stringify(orignFormData.value)),
          JSON.parse(JSON.stringify(formData))
        );
        console.log(
          JSON.parse(JSON.stringify(orignFormData.value)),
          JSON.parse(JSON.stringify(formData.shaftSuffixIds))
        );

        // {
        //   b: { value1: 2, value2: 3, label: '升级次数' },
        // }
        // 设置label，设置趋势图信息（特殊处理）
        for (let key in diff) {
          if (diff.hasOwnProperty(key)) {
            diff[key].label = filterLable(
              key,
              isNotStage.value,
              diff[key].value2
            );

            // 设置趋势图报警第一行
            if (keyArr.includes(key)) {
              diff["showBaoJing"] = {
                value1: "",
                value2: "",
                label: "趋势图上升报警设置",
              };
            }

            // 设置趋势图报警第二行
            if (keyArr1.includes(key)) {
              diff["showBaoJing1"] = {
                value1: "",
                value2: "",
                label: "趋势图下降报警设置",
              };
            }
          }
        }

        // 获取特殊处理的趋势图字段对象
        const diff_fz = {};
        for (let key in diff) {
          if (diff.hasOwnProperty(key)) {
            if (keyArr.includes(key) || keyArr1.includes(key)) {
              diff_fz[key] = deepClone(diff[key]);
              delete diff[key];
            }
          }
        }

        diffDataChart.value = diff_fz;

        diffData.value = diff || {};
        if (JSON.stringify(diffData.value) == "{}") {
          ElMessage.info("暂无内容变更");
          return;
        } else {
          dialogVisible.value = true;
        }
        console.log("不同diff-object", diffData.value, formData);
      }
    }
  });
}

function beforeSubmit() {
  if (changeDescription.value.replace(/\s+/g, "") === "") {
    ElMessage.error("请填写变更内容说明");
  } else {
    formData.remarks = changeDescription.value;
    handleSubmit();
  }
}
function filterValue(diffData: any, key: string, value: string) {
  if (key === "isEmail" || key === "isOrder") {
    return diffData[key][value] == "1" ? "是" : "否";
  } else if (key === "enabled") {
    return diffData[key][value] ? "启用" : "禁用";
  } else if (key === "toolUseType") {
    return (diffData[key][value] = useDictionary(
      "samplingStatus",
      diffData[key][value] ?? ""
    ));
  } else if (key === "maxUnit") {
    return (diffData[key][value] = useDictionary(
      "MaxUnit",
      diffData[key][value] ?? ""
    ));
  } else if (key === "showBaoJing") {
    return `过程能力趋势图cpk均高于${
      diffDataChart.value["defaultTall"]
        ? diffDataChart.value["defaultTall"][value]
        : formData.defaultTall
    }并且cpk连续${
      diffDataChart.value["tallStopover"]
        ? diffDataChart.value["tallStopover"][value]
        : formData.tallStopover
    }次高于${
      diffDataChart.value["successiveTall"]
        ? diffDataChart.value["successiveTall"][value]
        : formData.successiveTall
    }以上`;
  } else if (key === "showBaoJing1") {
    return `过程能力趋势图cpk均高于${
      diffDataChart.value["defaultLow"]
        ? diffDataChart.value["defaultLow"][value]
        : formData.defaultLow
    }并且cpk连续${
      diffDataChart.value["lowStopover"]
        ? diffDataChart.value["lowStopover"][value]
        : formData.lowStopover
    }次呈持续下降趋势`;
  } else {
    return diffData[key][value] || "空";
  }
}

// 排序
const showOperationRecord = () => {
  if (remarkList.value.length > 0) {
    remarkList.value.reverse();
  }
};

const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
  done();
};
// 按钮点击事件
const handleSwitchChange = (val) => {
  console.log(val);
};

const dialogVisibleBtn = () => {
  dialogVisible.value = false;
  getInfo(formData.id);
};

// 获取特性送检列表
const specialInspectionList = ref<Array<object>>([]);
const getSpecialInspectionList = async () => {
  await request({
    url: "/dmpDosPcm/pcmspecialrule/getList",
    method: "post",
    data: {},
  }).then((res) => {
    specialInspectionList.value = res.data;
    // console.log(" specialInspectionList.value", specialInspectionList.value);
  });
};
onMounted(() => {
  getSpecialInspectionList();
});
</script>
<style scoped>
.yellow-icon :deep(.el-icon) {
  /* color: #ffb441; */
  color: gray;
  font-size: 15px; /* 根据需要调整大小 */
  height: 65%;
  margin-left: 5px;
}

/* ::v-deep .is-bordered-label {
  width: 25% !important;
}

::v-deep .is-bordered-content {
  width: 25% !important;
} */

.el-picker-panel {
  .el-scrollbar:nth-of-type(2) {
    display: none !important;
  }
}

.el-time-spinner {
  text-align: center;
}

:deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
  width: 170px;
}

:deep(
    .change_des .el-descriptions__label.el-descriptions__cell.is-bordered-label
  ) {
  /* width: auto !important;
  min-width: 140px;
  max-width: 170px; */
}

:deep(.el-descriptions__content.el-descriptions__cell.is-bordered-content) {
  min-width: 100px;
}

:deep(.el-dialog__body) {
  padding: 20px;
  max-height: 65vh;
  overflow-y: auto;
}
</style>
